<template>
  <div class="login">
    <div class="r_dl">
      <div class="r_word font">
        <p class="city font">邢台市广宗县</p>
        乡村振兴云平台
      </div>
      <div class="deng_lu">
        <div class="dls">
          <div class="d_1">欢迎登录</div>
          <div class="d_2">
            <input
              type="text"
              v-model="username"
              @focus="isname = false"
              @blur="name()"
              placeholder="请输入用户名"
            />
            <span v-if="isname">请输入用户名</span>
          </div>
          <div class="d_3">
            <input
              type="password"
              v-model="password"
              placeholder="请输入密码"
              @focus="ispwd = false"
              @blur="pwd"
            />
            <span v-if="ispwd">请输入密码</span>
          </div>
          <div class="d_4">
            <label>
              <input type="checkbox" v-model="isremember" />
              <span class="re_word">记住密码</span>
            </label>
            <span class="forget">忘记密码?</span>
          </div>
          <button class="d_5" @click="submit" @keyup.enter="handleAddBook">
            安全登录
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "network/login";
export default {
  data() {
    return {
      username: "",
      password: "",
      isname: false,
      ispwd: false,
      isremember: false,
    };
  },
  mounted() {},
  created() {
    window.localStorage.href = 'http://124.70.6.124:8081/back'
    this.handleAddBook();
    this.setNamePwd();
  },
  methods: {
    submit() {
      if (this.username != "" || this.password != "") {
        login(this.username, this.password).then((res) => {
          console.log(res);
          if (res.success == true) {
            localStorage.setItem("token", res.result.token);
            if (this.isremember) {
              let namePwd = {
                username: this.username,
                password: this.password,
              };
              localStorage.setItem("login", JSON.stringify(namePwd));
            }
            localStorage.setItem(
              "menuPlList",
              JSON.stringify(res.result.menuPlList)
            );
            this.$router.push("/main/sy");
          } else {
            alert(res.message);
          }
        });
      } else {
        this.name();
        this.pwd();
      }
    },
    handleAddBook() {
      document.onkeydown = (e) => {
        if (e.keyCode === 13) {
          this.submit();
        }
      };
    },
    name() {
      if (this.username != "") {
        this.isname = false;
      } else {
        this.isname = true;
      }
    },
    pwd() {
      if (this.password != "") {
        this.ispwd = false;
      } else {
        this.ispwd = true;
      }
    },
    setNamePwd() {
      if (localStorage.getItem("login")) {
        const { username, password } = JSON.parse(
          localStorage.getItem("login")
        );
        this.username = username;
        this.password = password;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.font {
  background-image: -webkit-linear-gradient(bottom, #4fb3e4, #85c4ef, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login {
  width: 100%;
  height: 100%;
  background: url(~assets/img/login/bg.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  .r_dl {
    position: absolute;
    right: 6.25rem;
    top: 13.6875rem;
    z-index: 3;
    .r_word {
      font-size: 3.75rem;
      text-align: center;
      font-family: "hzgb";
      .city {
        color: #f0f0f0;
        position: absolute;
        width: 100%;
        top: -5rem;
        font-size: 2rem;
      }
    }
    .deng_lu {
      width: 37.5rem;
      height: 34.375rem;
      background: url(~assets/img/login/border.png) no-repeat;
      background-size: 100% 100%;
      z-index: 9;
      display: flex;
      justify-content: center;
      align-items: center;
      .dls {
        width: 25rem;
      }
      .d_1 {
        width: 100%;
        font-size: 1.5rem;
        color: #fff;
        text-align: center;
        margin-bottom: 1.25rem;
      }
      .d_2,
      .d_3 {
        border-width: 0.25rem;
        border-color: rgb(70, 176, 226);
        border-style: solid;
        border-radius: 0.625rem;
        width: 100%;
        height: 3.75rem;
        margin-bottom: 1.25rem;
        color: #fff;
        position: relative;
        input {
          width: 100%;
          height: 100%;
          font-size: 1.375rem;
          text-indent: 1.25rem;
          color: #fff;
          background: none;
          border: none;
          outline: none;
        }
        span {
          position: absolute;
          left: 0;
          bottom: -1.25rem;
          color: red;
        }
      }
      .d_4 {
        width: 100%;
        height: 1.875rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9375rem;
        margin-bottom: 1.25rem;
        color: #fff;
      }
      .d_5 {
        border-radius: 0.625rem;
        background-color: rgb(70, 176, 226);
        width: 100%;
        height: 3.75rem;
        font-size: 1.875rem;
        color: #fff;
      }
    }
  }
  .jszc {
    position: fixed;
    bottom: 0.625rem;
    font-size: 1.25rem;
    width: 100%;
    text-align: center;
  }
}
</style>